import React from 'react';
import './Item.css';

function Item({ todo, toggleComplete, deleteTodo }) {
  return (
    <div className="todo-item">
      <div className="todo-item-left">
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => toggleComplete(todo.id)}
        />
        <span className={todo.completed ? 'completed' : ''}>
          {todo.text}
        </span>
      </div>
      <button 
        className="delete-btn" 
        onClick={() => deleteTodo(todo.id)}
      >
        删除
      </button>
    </div>
  );
}

export default Item;